<script lang="ts" setup>
import ExpertList from './ExpertList.vue'
import HealthSx from './HealthSx.vue'
import HealthyXA from './HealthyXA.vue'
import ListNavs from './ListNavs.vue'
import PopularsScience from './PopularsScience.vue'
import publicize from './publicize.vue'
import PublicMan from './PublicMan.vue'
import Topnews from './Topnews.vue'

</script>

<template>
  <div>
    <div class="page-bg">
      <div class="inner-top"/>
    </div>
    <div class="full-page">
      <HealthSx/>
      <ListNavs/>
      <Topnews/>
      <!-- <ExpertList /> -->
      <HealthyXA/>
      <PublicMan/>
      <ClientOnly>
        <PopularsScience/>
      </ClientOnly>
      <publicize/>
    </div>
  </div>
</template>

<style>
.page-bg {
  background-image: url('/img/bg2.png');
  background-repeat: no-repeat;
  background-position: bottom;
  height: 540px;
  width: 100%;
}

.full-page {
  margin-top: -540px;
  width: 100%;
}

.inner-top {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #27a280 0, transparent);
}
</style>
